<template>
  <view
    class="mix-page-header row"
    :style="{
      height: navigationBarHeight + 'px',
      paddingTop: statusBarHeight + 'px',
      backgroundColor: 'rgba(255,255,255, ' + headerOpacity + ')',
    }"
  >
    <view class="left"><slot name="left"></slot></view>
    <view class="center" :style="{ opacity: headerOpacity }">
      <view>{{ title }}</view>
    </view>
    <view class="right"><slot name="right"></slot></view>
  </view>
</template>

<script setup>
import { toRefs, computed } from "vue"

const props = defineProps({
  headerOpacity: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: "",
  },
})

const { headerOpacity, title } = toRefs(props)

// 吧上面改为 vue3
const statusBarHeight = computed(() => {
  return uni.getSystemInfoSync().statusBarHeight
})

const navigationBarHeight = computed(() => {
  return uni.getSystemInfoSync().navigationBarHeight
})
</script>

<style scoped lang="scss">
.row {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
}

.center {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mix-page-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 990;
  justify-content: center;
  width: 100%;
  text-align: center;
  // height: calc(44px + env(safe-area-inset-top));
  height: 44px;
}

.right, .left {
  position: absolute;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}
</style>
